<div class="content-heading">
    <div>
        👨‍👩‍👧‍👦 &nbsp;&nbsp;{{ 'general.users' | translate }}
        <small><b> {{ 'users.description' | translate }}.</b></small>
    </div>
</div>

<app-loading *ngIf="users == null"></app-loading>

<div class="card card-default" *ngIf="users">
    <div class="card-header">
        <a class="btn btn-outline-primary mb-3" [routerLink]="[ '/users/add' ]"><i class="fa fa-plus-circle"></i>
            {{ 'users.new-user' | translate }}</a>
        <div class="input-group">
            <input class="form-control" type="text" placeholder="Search" (keyup)="findUser($event)"
                (blur)="findUser($event)" />
        </div>
    </div>

    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-striped">

                <tbody>
                    <tr *ngFor="let user of users">
                        <td>
                            <div class="btn-group">
                                <a [routerLink]="['/users', user.userName, 'edit']" class="btn btn-primary btn-xs"
                                    placement="top" [tooltip]="'general.edit' | translate"><i
                                        class="fa fa-edit"></i></a>
                                <a [routerLink]="['/users', user.userName, 'events']" [state]="user" class="btn btn-outline-primary btn-xs"
                                    placement="top" [tooltip]="'users.list.log-tooltip' | translate"><i
                                        class="fas fa-history"></i></a>
                              
                            </div>
                        </td>
                        <td>
                            <div class="media align-items-center">
                                <a class="mr-3" href="#">
                                    <img *ngIf="user.picture" class="img-fluid rounded thumb48" [src]="user.picture" />
                                    <img *ngIf="!user.picture" class="img-fluid rounded thumb48"
                                        src="assets/img/dummy.png" alt="" />
                                </a>
                                <div class="media-body d-flex">
                                    <div>
                                        <h4 class="m-0">{{user.name}}</h4>
                                        <small class="text-muted">{{user.userName}}</small>
                                        <p><i class="fas fa-mail-bulk"></i> {{user.email}}</p>
                                    </div>
                                    <div class="ml-auto">
                                        <button class="btn btn-danger btn-sm" placement="top"
                                            [tooltip]="'general.remove' | translate" (click)="remove(user.id)"><i
                                                class="fa fa-times"></i></button>
                                    </div>
                                </div>
                            </div>

                        </td>

                    </tr>
                </tbody>
            </table>
        </div>

    </div>
    <div class="card-footer">
        <div class="d-flex">
            <div>
                <div class="input-group">
                    <input class="form-control" type="text" placeholder="Search" (keyup)="findUser($event)"
                        (blur)="findUser($event)" />
                </div>
            </div>
            <div class="ml-auto">
                <div class="input-group">
                    <label class="col-form-label">Items per page:&nbsp;</label>
                    <select class="custom-select" [(ngModel)]="quantity" (change)="loadResources()">
                        <option value="10">10</option>
                        <option value="20">20</option>
                        <option value="30">30</option>
                        <option value="40">40</option>
                        <option value="50">50</option>
                    </select>
                    <ngb-pagination [collectionSize]="total" [(page)]="page" [maxSize]="5" [rotate]="true"
                        [ellipses]="false" [boundaryLinks]="true" [pageSize]="quantity" (pageChange)="loadResources()">
                    </ngb-pagination>
                </div>
            </div>
        </div>
    </div>
</div>
